/* eslint-disable no-unused-vars */
import './index.css';
import list from './data.js';
let ul = document.querySelector('.content > ul');
let prevBtn = document.querySelector('.prev');
let nextBtn = document.querySelector('.next');
// let totalBox = document.querySelector('.total');
// let selectBox = document.querySelector('select');
let select = document.querySelector('select');
let total = document.querySelector('.total');
// 获取数据长度
let dataLength = list.length;
// 获取分页数量
let num = select.value;
// 初始化第一页
let pageNum = 1;
// 初始化最后一页
let pageAll = Math.ceil(dataLength / num);
render();
btnBool();
function render() {
    // 当要渲染时先获取每页的数量
    // 将分页总页数渲染
    num = select.value;
    pageAll = Math.ceil(dataLength / num);
    pageNum = Number(total.innerHTML.slice(0, 1));
    total.innerHTML = `${pageNum} / ${pageAll}`;
    // 获取当前的页数
    // let innerStr = "";
    // 重置页面内容
    ul.innerHTML = '';
    // 将每页的内容渲染出来
    // 根据每页的个数和当前的页数进行数据选取
    // 注意：当前的数据不能大于数据的长度
    for (
        let i = (pageNum - 1) * num;
        i <= pageNum * num - 1 && i < list.length;
        i++
    ) {
        ul.innerHTML += `<li>
          <img
            src="${list[i].pic}"
            alt=""
          />
          <p>${list[i].name}</p>
          <p>城市: ${list[i].city}</p>
          <p>地址: ${list[i].address}</p>
          <p>价格: ${list[i].price}</p>
          <p>演出时间: ${list[i].showTime}</p>
        </li>
        `;
    }
}
// 选框更改时执行的内容
select.addEventListener('change', function () {
    // 重置为第一页
    pageNum = 1;
    // 改变页数显示内容
    total.innerHTML = `${pageNum} / ${pageAll}`;
    render();
    btnBool();
});
// 点击前一页后渲染数字
prevBtn.addEventListener('click', function () {
    pageNum = Number(total.innerHTML.slice(0, 1));
    pageAll = Math.ceil(dataLength / num);
    if (pageNum != 1) {
        // 当前的页数-1
        pageNum = pageNum - 1;
        pageAll = Math.ceil(dataLength / num);
        total.innerHTML = `${pageNum} / ${pageAll}`;
    }
    render();
    btnBool();
});
// 点击后一页后渲染数字
nextBtn.addEventListener('click', function () {
    // 获取当前的页数
    pageNum = Number(total.innerHTML.slice(0, 1));
    // 获取最大的页数
    pageAll = Math.ceil(dataLength / num);
    // 不为最后一页就更新当前页数
    if (pageNum != pageAll) {
        pageNum = pageNum + 1;
        total.innerHTML = `${pageNum} / ${pageAll}`;
    }
    render();
    btnBool();
});
// 判断当前按钮是否能按
function btnBool() {
    // 当前页数
    pageNum = Number(total.innerHTML.slice(0, 1));
    // 总页数
    pageAll = Math.ceil(dataLength / num);
    // 如果当前页数为1，则禁止左按钮
    if (Number(pageNum) === 1) {
        prevBtn.classList.add('disable');
    } else {
        prevBtn.classList.remove('disable');
    }
    // 如果单签页数为最后一页，禁止右按钮
    if (Number(pageNum) === pageAll) {
        nextBtn.classList.add('disable');
    } else {
        nextBtn.classList.remove('disable');
    }
}
